import * as THREE from 'three';
import WebGL from 'three/addons/capabilities/WebGL.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const isSupport = WebGL.isWebGL2Available();

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xff1010);

// 创建摄像机
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 500);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.SphereGeometry(16, 50, 50);

// 加载纹理图像
const textureLoader = new THREE.TextureLoader();
const map = textureLoader.load('/texture.jpg'); // 替换为你的纹理图像路径

// 创建材质并应用贴图
const material = new THREE.MeshBasicMaterial({ map });

// 创建网格
const cube = new THREE.Mesh(geometry, material);
// 将网格添加到场景
scene.add(cube);

camera.position.z = 50;

const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

function animate() {
  requestAnimationFrame(animate);

  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  controls.update();
  renderer.render(scene, camera);
}

animate();
